<template>
  <div class="update-pass-container">
    <el-card class="update-pass-card">
      <template #header>
        <div class="card-header">
          <span class="header-title">
            <el-icon class="header-icon"><Key /></el-icon>
            修改密码
          </span>
        </div>
      </template>
      <el-form :model="form" :rules="rules" ref="formRef" label-width="100px" class="update-form">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username" disabled class="custom-input">
            <template #prefix>
              <el-icon><User /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="原密码" prop="oldPass">
          <el-input v-model="form.oldPass" type="password" show-password class="custom-input">
            <template #prefix>
              <el-icon><Lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPass">
          <el-input v-model="form.newPass" type="password" show-password class="custom-input">
            <template #prefix>
              <el-icon><Key /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPass">
          <el-input v-model="form.confirmPass" type="password" show-password class="custom-input">
            <template #prefix>
              <el-icon><Check /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item class="button-group">
          <el-button type="primary" @click="submitForm" class="submit-btn">
            <el-icon class="button-icon"><Check /></el-icon>
            确认修改
          </el-button>
          <el-button @click="goBack" class="back-btn">
            <el-icon class="button-icon"><Back /></el-icon>
            返回
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Key, User, Lock, Check, Back } from '@element-plus/icons-vue'
import axios from 'axios'
import { ip } from '@/config/baseURL'

const route = useRoute()
const router = useRouter()
const formRef = ref(null)

const form = reactive({
  username: '',
  oldPass: '',
  newPass: '',
  confirmPass: ''
})

const validatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    if (form.confirmPass !== '') {
      formRef.value?.validateField('confirmPass')
    }
    callback()
  }
}

const validatePass2 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== form.newPass) {
    callback(new Error('两次输入密码不一致!'))
  } else {
    callback()
  }
}

const rules = {
  oldPass: [
    { required: true, message: '请输入原密码', trigger: 'blur' }
  ],
  newPass: [
    { required: true, validator: validatePass, trigger: 'blur' }
  ],
  confirmPass: [
    { required: true, validator: validatePass2, trigger: 'blur' }
  ]
}

const submitForm = async () => {
  if (!formRef.value) return
  
  await formRef.value.validate(async (valid) => {
    if (valid) {
      try {
        const response = await axios.post(ip + '/api/update/pass', {
          oldPass: form.oldPass,
          newPass: form.newPass
        }, {
          headers: {
            'auth': localStorage.getItem('auth')
          }
        })
        
        if (response.data.code === 200) {
          ElMessage.success('密码修改成功')
          router.push('/a1')
        } else {
          ElMessage.error(response.data.msg || '密码修改失败')
        }
      } catch (error) {
        ElMessage.error('密码修改失败，请稍后重试')
      }
    }
  })
}

const goBack = () => {
  router.back()
}

onMounted(() => {
  form.username = route.query.username || ''
})
</script>

<style scoped>
.update-pass-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #e8f4ff 0%, #f0f7ff 100%);
  padding: 20px;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}

.update-pass-card {
  width: 520px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  background: #ffffff;
  border: 1px solid #e8e8e8;
}

.update-pass-card:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #e8e8e8;
  background: #ffffff;
  border-radius: 8px 8px 0 0;
}

.header-title {
  font-size: 20px;
  font-weight: 600;
  color: #1a1a1a;
  letter-spacing: 0.5px;
  position: relative;
  padding-left: 12px;
}

.header-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 20px;
  background: #4a90e2;
  border-radius: 2px;
}

.update-form {
  padding: 24px 32px;
}

.custom-input {
  transition: all 0.3s ease;
}

.custom-input :deep(.el-input__wrapper) {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  border-radius: 6px;
  padding: 8px 12px;
  background: #fafafa;
  border: 1px solid #e8e8e8;
}

.custom-input :deep(.el-input__wrapper:hover) {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-color: #d9d9d9;
}

.custom-input :deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.1);
  border-color: #4a90e2;
}

.button-group {
  margin-top: 36px;
  display: flex;
  justify-content: center;
  gap: 24px;
}

.submit-btn {
  padding: 12px 36px;
  font-size: 15px;
  border-radius: 6px;
  background: #4a90e2;
  border: none;
  transition: all 0.3s ease;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.submit-btn:hover {
  background: #357abd;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(74, 144, 226, 0.15);
}

.back-btn {
  padding: 12px 36px;
  font-size: 15px;
  border-radius: 6px;
  transition: all 0.3s ease;
  border: 1px solid #4a90e2;
  background: #ffffff;
  color: #4a90e2;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.back-btn:hover {
  color: #357abd;
  border-color: #357abd;
  background: #f0f7ff;
}

:deep(.el-form-item__label) {
  font-weight: 500;
  color: #4a90e2;
  font-size: 14px;
}

:deep(.el-input.is-disabled .el-input__wrapper) {
  background-color: #f5f5f5;
  box-shadow: none;
  border-color: #e8e8e8;
}

:deep(.el-form-item) {
  margin-bottom: 24px;
}

:deep(.el-form-item__error) {
  font-size: 12px;
  padding-top: 4px;
}

.header-icon {
  margin-right: 8px;
  font-size: 20px;
  color: #4a90e2;
}

.button-icon {
  margin-right: 6px;
  font-size: 16px;
}

.custom-input :deep(.el-input__prefix) {
  color: #4a90e2;
  font-size: 16px;
  margin-right: 8px;
}

.custom-input :deep(.el-input__wrapper) {
  padding-left: 12px;
}
</style> 